
  
  <template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="机构名称" prop="organizationId">
        <ApiSelect
          v-model="queryParams.organizationId"
          clearable
          class="!w-240px"
          apiName="organization"
        ></ApiSelect>
      </el-form-item>
      <el-form-item label="学生姓名" prop="realName">
        <el-input
          v-model="queryParams.realName"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="success" plain @click="onExport"> 导出 </el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <template #header>
        <div class="card-header">学生列表</div>
      </template>

      <el-table :data="list" :loading="loading">
        <el-table-column label="序号" align="center" prop="_index" />
        <el-table-column
          label="公司名称"
          align="center"
          prop="organizationName"
        >
        </el-table-column>
        <el-table-column label="所属部落" align="center" prop="tribeName">
        </el-table-column>
        <el-table-column label="学生姓名" align="center" prop="realName">
        </el-table-column>
        <el-table-column label="学生性别" align="center" prop="sex">
          <template #default="scope">
            <tag :value="scope.row.sex" type="sex"></tag>
          </template>
        </el-table-column>
        <el-table-column
          label="联系方式"
          width="120px"
          align="center"
          prop="phone"
        >
        </el-table-column>
        <el-table-column
          width="170px"
          label="证件号码"
          align="center"
          prop="cardNo"
        >
        </el-table-column>
        <el-table-column
          label="出生日期"
          width="200px"
          align="center"
          prop="createTime"
        >
        </el-table-column>
        <el-table-column
          label="国籍"
          width="200px"
          align="center"
          prop="countryName"
        >
        </el-table-column>

        <el-table-column
          label="注册日期"
          width="200px"
          align="center"
          prop="createTime"
        >
        </el-table-column>
        <el-table-column label="是否可用" align="center" prop="status">
          <template #default="scope">
            <tag :value="scope.row.status" type="status"></tag>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="120px"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="toEditPage(scope.row.userId)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :="pagination" class="padding10" />
    </el-card>
  </div>
</template>
  
<script setup lang="ts">
import API from '@/api/api';
import { CONST_VALUE } from '@/utils/const';
import { useTablePage } from '@/hooks/useTablePage';
const router = useRouter();
const {
  queryParams,
  queryFormRef,
  loading,
  total,
  list,
  handleQuery,
  resetQuery,
  handleDelete,
  pagination,
  exportHandle,
} = useTablePage({
  queryApi: API.studentController.list,
  exportApi: API.studentController.export,
});
function toEditPage(id?: number) {
  router.push({
    name: 'editStudent',
    query: {
      id,
    },
  });
}
function onExport() {
  exportHandle({
    fileName: '学生列表',
  });
}
</script>